<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录页面</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="./css/Element-ui.css" />
  </head>
  <style>
    body {
      margin: 0;
    }

    .center {
      width: 1200px;
      margin: 0 auto;
    }

    .el-form-item__label {
      color: #ffffff;
    }

    #footer_center p {
      margin: 0;
    }

    #footer_center h3 {
      color: white;
    }
  </style>

  <body>
    <div id="app">
      <el-container>
        <my-header></my-header>
        <el-main
          style="
            background-image: url(./imgs/loginbg.gif);
            height: 500px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
          "
        >
          <el-card
            style="
              width: 500px;
              height: 300px;
              margin: 60px auto;
              background: rgba(255, 255, 255, 0.3);
              backdrop-filter: blur(10px);
              border: 0;
            "
          >
            <el-form style="width: 400px; margin: 0 auto">
              <el-form-item label="用户名">
                <el-input
                  placeholder="请输入用户名"
                  maxlength="18"
                  v-model="user.username"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input
                  placeholder="请输入密码"
                  type="password"
                  maxlength="18"
                  v-model="user.password"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="background-color: orange; border: 0; color: white"
                  @click="login"
                  >登录</el-button
                >
                <el-button type="info" @click="reg">注册</el-button>
              </el-form-item>
            </el-form>
          </el-card></el-main
        >
        <el-footer
          style="background-color: #2f3234; height: 280px; padding: 50px"
        >
          <my-footer />
        </el-footer>
      </el-container>
    </div>
  </body>
  <!-- 引入vue axios element-ui -->
  <script src="./js/vue.min.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/Element-ui.min.js"></script>
  <script src="./js/my-footer.js"></script>
  <script src="./js/my-header.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: function () {
        return {
          logo: "./imgs/icon.png",
          user: { username: "", password: "" },
        };
      },
      methods: {
        login() {
          if (v.username < 6) {
            v.$message.error("请输入6位以上的用户名");
            return;
          } else if (v.password < 8) {
            v.$message.error("请输入8位以上的密码");
            return;
          }
          //如果上述无误发出登录请求
          axios.post("/v1/login", v.user).then(function (response) {
            //如果返回其他表示当前用户未注册，返回1表示登录成功，返回0表示密码错误
            switch (response.data) {
              case 0:
                v.$message.error("当前用户密码错误");
                break;
              case 1:
                v.$message.success("登录成功");
                //登录成功后进入主页
                location.href = "/";
                break;
              default:
                v.$message.error("当前用户未注册");
                break;
            }
          });
        },
        reg() {
          location.href = "/reg.html";
        },
      },
      created: {},
    });
  </script>
</html>
